<template>
    <div class="data">
      <div class="top-title">
        <div>
          <span>订单号：{{data.orderNumber}}</span>
          <span>订单状态：{{orderState[data.orderState*1-1]}}</span>
          <span>充电时长：{{data.realHour}}小时</span>
        </div>
        <div>
          <el-button class="btmsdd" type="primary" icon="el-icon-connection" @click="dialogVisible = true;">订单状态跟踪</el-button>
          <el-button class="btmsdd" type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
        </div>

      </div>
      <div class="tipjd-box">
        <div class="jt-item" v-for="(item,index) in data.logList">
          <span class="line" v-if="index !=data.logList.length-1"></span>
          <p><i class="el-icon-success"></i></p>
          <h3>{{item.briefInfo}}</h3>
          <h4>{{item.createTime}}</h4>
        </div>
      </div>

      <div class="info-box">
        <div class="item-li" style="width: 25%">
          <h3>费用信息</h3>
          <p>实际支付金额：{{data.orderGold}}元</p>
          <p>充电费用：{{data.chargeFee}}元</p>
          <p>服务费：{{data.serviceFee}}元</p>
          <h3>支付信息</h3>
          <p>支付方式：{{data.cardNo?'卡支付':'在线支付'}}</p>
          <p>支付状态：{{data.payTime?'已支付':''}}</p>
          <p>支付时间：{{data.payTime}}</p>
        </div>
        <div class="item-li" style="width: 50%">
          <h3>设备信息</h3>
          <div style="display: flex;">
            <div style="margin-right: 10%">
              <p>地址：{{data.address}}</p>
              <p>设备编号：{{data.pileNo}}</p>
              <p>设备名称：{{data.pileName}}</p>
              <p>设备类型：{{data.pileType==1?'快充':'慢充'}}</p>
              <p>端口：{{data.pilePortName}}</p>
              <p>充电时长：{{data.realHour}}小时</p>
              <p>电流：{{data.electricity}}</p>
              <p>电压：{{data.voltage}}V</p>
            </div>
            <div>
              <p>最大功率：{{data.maxPower}}</p>
              <p>已充电量：{{data.consumePower}}</p>
            </div>
          </div>
        </div>
        <div class="item-li" style="width: 25%">
          <h3>用户信息</h3>
          <p>用户名：{{data.userName}}</p>
          <p>手机号：{{data.userTelephoneNo}}</p>
        </div>
      </div>
      <el-dialog title="订单状态跟踪" :visible.sync="dialogVisible" width="650px">
        <template>
          <el-table
              :data="logList"
              style="width: 100%">
            <el-table-column
                prop="id"
                label="序号"
                width="80">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="logContent"
                label="描述"
                width="330">
            </el-table-column>
          </el-table>
        </template>
        <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
      </el-dialog>
    </div>
</template>
<script>
    import {getOrderDetail,getOrderTrace} from '@/api/order'
    export default {
        data() {
            return {
              dialogVisible:false,
              orderNumber: this.$route.query.orderNumber,
              data:{logList:[],},
              orderState:['下单','取消','支付成功','退款','完成'],
              logList:[]
            }
        },
        created() {
            this.getOrderData()
            this.getOrderTrace()
        },
        methods: {
          getOrderData() {
            let param = {
              orderNumber: this.orderNumber,
            }
            getOrderDetail(param).then(res => {
                    if (res.message.status == 200) {
                        this.data = res.data;
                    }
                })
          },
          getOrderTrace() {
            let param = {
              orderNumber: this.orderNumber,
            }
            getOrderTrace(param).then(res => {
                    if (res.message.status == 200) {
                        this.logList = res.data;
                    }
                })
          },
          back(){
            this.$router.back();
          },
        }
    }
</script>
<style scoped lang="scss">
    .data{
      margin-left: 20px;
      margin-top: 20px;
      margin-right: 20px;
      border-radius: 0 0 8px 8px;
      padding-bottom: 20px;
    }
    .top-title{
      font-size: 14px;
      padding: 10px 10px 10px 10px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      line-height: 40px;
      border-radius: 8px 8px 0 0;
      background-color: #04132A;
    }
    .btmsdd{
      color: #c7def5;
      background-color: #0b438f;
    }
    .top-title span{
      margin: 0 20px;
      color: #386ac2;
    }
    .tipjd-box{
      display: flex;
    }
    .tipjd-box .jt-item{
      width: 33.3%;
      text-align: center;
      position: relative;
    }
    .tipjd-box .jt-item .line{
      position: absolute;
      width: calc(100% - 60px);
      margin: 0 30px;
      border-bottom: 2px solid #1751a8;
      top:29px;
    }
    .tipjd-box .jt-item p .el-icon-success{
      font-size: 45px;
      margin-bottom:15px;
      color: #1751a8;
    }
    .tipjd-box .jt-item h3{
      color: #386ac2;
      line-height: 30px;
      font-size: 16px;
    }
    .tipjd-box .jt-item h4{
      color: #2a4067;
      line-height: 30px;
      font-size: 14px;
    }
    .info-box{
      padding: 10px;
      margin:20px;
      display: flex;
    }
    .info-box .item-li{
      width: 33.33%;
    }
    .info-box .item-li h3{
      font-size: 16px;
      color: #d5deef;
      line-height: 40px;
    }
    .info-box .item-li p{
      font-size: 14px;
      color: #7da1c3;
      line-height: 30px;
    }
</style>
